<template>
  <el-form>
    <h2>皮肤设置</h2>
    <el-form-item label="导航条类型" v-if="false">
      <el-radio-group v-model="navbarLayoutType">
        <el-radio label="default" border>default</el-radio>
        <el-radio label="inverse" border>inverse</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="侧边栏皮肤" >
      <el-radio-group v-model="sidebarLayoutSkin"   @change="sidebarSkinChange">
        <el-radio label="light" border>light</el-radio>
        <el-radio label="dark" border>dark</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="主题皮肤">

    <el-select v-model="color" clearable placeholder="请选择"   @change="colorChange" >

        <el-option
          v-for="item in options"
          :key="item.key"
          :label="item.text"
          :value="item.key">
        </el-option>

    </el-select>

    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data () {

      return {
        color: '#17B3A3',
        options: [{ 'key':'#0BB2D4', 'text': '青色'},
           {'key':'#3E8EF7', 'text':'蓝色'},
           {'key':'#11C26D', 'text':'绿色'},
           {'key':'#17B3A3', 'text':'蓝绿色（默认）'},
       

    
           {'key':'#667AFA', 'text':'靛青色'},
           {'key':'#997B71', 'text':'棕色'},
           {'key':'#9463F7', 'text':'紫色'},
           {'key':'#757575', 'text':'灰色'},
           {'key':'#EB6709', 'text':'橙色'},
           {'key':'#F74584', 'text':'粉红色'},
           {'key':'#FCB900', 'text':'黄色'},
           {'key':'#FF4C52','text':'红色'}
 
    
        ],
        sidebarLayoutSkin: ''
      }
    },
    created(){
      this.init()
      
    },
    computed: {
      navbarLayoutType: {
        get () { return this.$store.state.common.navbarLayoutType },
        set (val) { this.$store.commit('common/updateNavbarLayoutType', val) }
      },
      // sidebarLayoutSkin: {
      //   get () { 
      //     var sidebarLayoutSkin = window.localStorage.getItem('sidebarLayoutSkin')
      //     if (!sidebarLayoutSkin){
      //       sidebarLayoutSkin = this.$store.state.common.sidebarLayoutSkin
      //     }
      //     return  sidebarLayoutSkin 
      //   },
        // set (val) { 
        //     this.$store.commit('common/updateSidebarLayoutSkin', val) 
        //   }
      // }
    },
    methods:{
      init(){
        this.sidebarLayoutSkin = window.localStorage.getItem('sidebarLayoutSkin')
          if (!this.sidebarLayoutSkin){
            this.sidebarLayoutSkin = this.$store.state.common.sidebarLayoutSkin
          }
        

        this.color = window.localStorage.getItem('color')
        if (!this.color){
            this.color = '#17B3A3'
        } 
      },
      refresh(){
          this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1000,
                  onClose: () => {
                    window.location.reload()
                  }
                })
      },
      colorChange(val){
        window.localStorage.setItem('color', val)
        this.refresh()   
      },
      sidebarSkinChange(val){
         window.localStorage.setItem('sidebarLayoutSkin', val)
         this.$store.commit('common/updateSidebarLayoutSkin', val) 
         this.refresh()         
      }
    }
  }
</script>

